import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import {Card} from 'antd';
import TablePanel from './TablePanel';
import QueryPanel from './QueryPanel';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';
import Detail from './Detail';
import Approve from './Approve';
import Add from './Add';
import qs from 'qs';
import isEmpty from 'lodash/isEmpty';
export class App extends PureComponent {
    componentDidMount() {
        this.props.init();
    }

    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route
                            path={routes.query.url()}
                            exact
                            render={props => {
                                const params = qs.parse(props.location.search.replace('?', ''));
                                return (
                                    <div>
                                        <Card>
                                            <QueryPanel queryParamObj={isEmpty(params) ? null : params}/>
                                        </Card>
                                        <Card>
                                            <TablePanel />
                                        </Card>
                                    </div>
                                );
                            }}/>
                        <Route path={routes.detail.url()} exact render={props =>
                            <Detail id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.approve.url()} exact render={props =>
                            <Approve id={props.match.params.id} page={'approve'} history={props.history} />} />
                        <Route path={routes.add.url()} exact render={props => <Add history={props.history} />} />
                        <Route
                            path={routes.update.url()}
                            exact
                            render={props => <Add id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.confirm.url()} exact render={props =>
                            <Approve id={props.match.params.id} page={'confirm'} history={props.history} />} />
                        <Route path={routes.confirmPi.url()} exact render={props =>
                            <Approve id={props.match.params.id} page={'confirmPi'} history={props.history} />} />
                        <Route path={routes.finance.url()} exact render={props =>
                            <Approve id={props.match.params.id} page={'finance'} history={props.history} />} />
                        <Route path={routes.moreApprove.url()} exact render={props =>
                            <Approve id={props.match.params.id} page={'moreApprove'} history={props.history} />} />
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}
App.propTypes = {
    history: PropTypes.object,
    init: PropTypes.func,
    location: PropTypes.object,
    match: PropTypes.object,
};
import {connect} from 'react-redux';
import {getInitData} from './actions.js';

const mapDispatchToProps = dispatch => ({
    init: () => dispatch(getInitData())
});

export default connect(
    null,
    mapDispatchToProps
)(App);
